<template>
  <view class="">
    <view class="commonBox" style="padding-bottom: 80rpx">
      <view class="wbBox">
        <view class="titleBox">
          <image :src="userInfo?.avatar" mode="scaleToFill" />
          <view class="info">
            <view class="title">
              {{ userInfo?.nickName }} <view class="authLabel" v-if="userInfo?.authFlag === '1'"><image src="../../static/home/yrz.png" mode="scaleToFill" /> 已认证</view>
            </view>
            <view class="hyBox" v-if="userInfo?.level === '1'"><image src="../../static/home/hg.png" mode="scaleToFill" /> 会员</view>
          </view>
        </view>
        <image class="ewm" @click="openewmPage" src="../../static/my/ewm.png" mode="scaleToFill" />
      </view>
      <u-modal :show="showModal" title="" @close="showModal = false" :showConfirmButton="false" :showCancelButton="false" :closeOnClickOverlay="true">
        <view style="width: 100%">
          <view class="box">
            <view class="left">
              <view class="nameBox">
                <view class="name">
                  <text>{{ userInfo?.nickName }}</text>
                  <image v-if="userInfo?.level === '1'" src="../static/home/hg.png" mode="scaleToFill" />
                </view>
                <view class="zw">{{ userInfo?.job }}</view>
                <view class="gs">{{ userInfo?.company }}</view>
              </view>
            </view>
            <image :src="userInfo?.avatar" class="headImage" mode="scaleToFill" />
          </view>
          <view class="ewmImg">
            <tki-qrcode :val="qrcodeVal" :size="270" ref="qrcode" @result="qrR"></tki-qrcode>
          </view>
          <u-button type="primary" shape="circle" @click="saveImage">立即分享</u-button>
        </view>
      </u-modal>
      <view class="walletList" style="width: 90%; border-top: none; margin-top: 0; padding: 0">
        <view v-for="(item, index) in myCurrencyList" :key="index" @click="goPage(item.url)">
          <view class="num">{{ item.count }}</view>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="kthyBox">
        <image src="../../static/home/hg.png" mode="scaleToFill" />
        <view class="text">平台流量扶持 立即开通会员</view>
        <view class="btn" @click="goPage('/pages/myPage/activateMembership')">立即开通</view>
      </view>
      <view class="commonBox sqBox">
        <view class="item" @click="goPage('/pages/myPage/businessCardAuth')"><image src="../../static/my/mprz.png" mode="scaleToFill" />申请名片认证</view>
        <view class="item" @click="goPage('/pages/myPage/MyBusinessCard/MyBusinessCardList')"><image src="../../static/my/wdmp.png" mode="scaleToFill" />我的名片</view>
      </view>
      <u-swiper keyName="image" :list="bannerList" indicator height="100" img-mode="scaleToFill" @click="swiperClick"></u-swiper>
      <view class="commonBox" style="margin-top: 20rpx">
        <CommonTitle title="其他工具" />
        <u-cell-group :border="false">
          <u-cell :border="false" title="我的行业" isLink @click="goPage('/pages/myPage/myIndustry')">
            <template #icon><image class="toolIcon" src="../../static/my/wdhy.png" mode="scaleToFill" /></template>
          </u-cell>
          <u-cell :border="false" title="我的好友" isLink @click="goPage('/pages/myPage/myFriends')">
            <template #icon><image class="toolIcon" src="../../static/my/myFriend.png" mode="scaleToFill" /></template>
          </u-cell>
          <u-cell :border="false" title="工厂入驻" isLink @click="goPage('/pages/myPage/myFactory/myFactory')">
            <template #icon><image class="toolIcon" src="../../static/my/gcrz.png" mode="scaleToFill" /></template>
          </u-cell>
          <u-cell :border="false" title="联系客服" isLink>
            <template #icon><image class="toolIcon" src="../../static/my/lxkf.png" mode="scaleToFill" /></template>
          </u-cell>
          <view class="lxkf">
            <u-button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"></u-button>
          </view>
          <u-cell :border="false" title="分享推广" isLink @click="goPage('/pages/myPage/InviteFriends')">
            <template #icon><image class="toolIcon" src="../../static/my/fxtg.png" mode="scaleToFill" /></template>
          </u-cell>
          <u-cell :border="false" title="系统设置" isLink @click="goPage('/pages/myPage/setting/setting')">
            <template #icon><image class="toolIcon" src="../../static/my/xtsz.png" mode="scaleToFill" /></template>
          </u-cell>
          <u-cell :border="false" title="意见反馈" isLink @click="goPage('/pages/myPage/feedback')">
            <template #icon><image class="toolIcon" src="../../static/my/yjfk.png" mode="scaleToFill" /></template>
          </u-cell>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from "vue";
import CommonTitle from "@/components/commonTitle.vue";
import { goPage } from "@/utils/commonFn";
// @ts-ignore
import { onShow } from "@dcloudio/uni-app";
// @ts-ignore
import tkiQrcode from "@/node_modules/tki-qrcode/components/tki-qrcode/tki-qrcode";
import { getByType, getUserInfo, userCenter } from "@/api/my";
import { getCardMainInfo } from "@/api/order";
const bannerList = ref<any>([]);
const lxPhone = ref();
const showModal = ref(false);
const userInfo = ref<myTypes.userInfo>();
const qrcode = ref();
const qrcodeVal = ref("");
onShow(async () => {
  myCurrencyList.value[0].count = 0;
  myCurrencyList.value[1].count = 0;
  myCurrencyList.value[2].count = 0;
  uni.showLoading({
    title: "加载中",
  });
  const res = await getUserInfo();
  uni.setStorageSync("userInfo", res.data);
  userInfo.value = res.data;
  const res2 = await userCenter();
  myCurrencyList.value[0].count = res2.data.balance;
  myCurrencyList.value[1].count = res2.data.postCount;
  myCurrencyList.value[2].count = res2.data.shareCount;
  const res3 = await getByType({ type: "3" });
  bannerList.value = res3.data;
  uni.hideLoading();
});
const picture = ref();
// 保存图征
const saveImage = () => {
  uni.saveImageToPhotosAlbum({
    filePath: picture.value,
    success(res) {
      uni.showToast({
        title: "已保存到相册",
        icon: "success",
        duration: 2000,
      });
    },
    fail(err) {
      console.log(err);
    },
  });
};
const qrR = (e: string) => {
  console.log(e);
  picture.value = e;
};
const openewmPage = async () => {
  const userInfo1: myTypes.userInfo = uni.getStorageSync("userInfo");
  if (!userInfo1.mobile) {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您当前未登录，是否前往登录",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/login");
        }
      },
    });
    return;
  }
  if (userInfo1.cardFlag == 0) {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您当前还没有名片，是否前往创建",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/MyBusinessCard/createBusinessCard");
        }
      },
    });
    return;
  }
  const res4 = await getCardMainInfo({ id: userInfo.value?.id });
  showModal.value = true;
  let str = `BEGIN:VCARD
VERSION:3.0
FN:${res4.data.name}
EMAIL:${res4.data.email}
TEL;CELL:${res4.data.mobile}
ORG:${res4.data.company}
TITLE:${res4.data.job}
ADR;WORK:${res4.data.address}
END:VCARD`;
  qrcodeVal.value = str;
  // 创建二维码
  setTimeout(() => {
    qrcode.value._makeCode();
  }, 300);
};
const myCurrencyList = ref([
  {
    count: 0,
    name: "我的钱包",
    url: "/pages/myPage/myWallet",
  },
  {
    count: 0,
    name: "我的帖子",
    url: "/pages/myPage/myPosts/myPosts",
  },
  {
    count: 0,
    name: "我的推广",
    url: "/pages/myPage/myPromotion",
  },
]);
const swiperClick = (e: number) => {
  goPage(`/pages/message/newsDetails?id=${bannerList.value[e].id}`);
};
const goPhone = () => {
  // wx.requestSubscribeMessage({
  //   tmplIds: ["zDgQbqtBBuBwGbEmtAYBiPWE8vdKMW1ILc_vIgSjCdk"],
  //   success() {},
  // });
  // uni.makePhoneCall({
  //   phoneNumber: lxPhone.value,
  // });
};
</script>

<style lang="less" scoped>
.wbBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .ewm {
    width: 48rpx;
    height: 48rpx;
  }
}
.titleBox {
  background-color: #fff;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  & > image {
    width: 128rpx;
    height: 128rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  .info {
    .title {
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #1e1e1e;
      display: flex;
      align-items: center;
    }
    .hyBox {
      width: 85rpx;
      background: linear-gradient(90deg, #fddf9e 0%, #ffd274 100%);
      border-radius: 20rpx;
      padding: 5rpx;
      font-size: 20rpx;
      color: #14041c;
      display: flex;
      align-items: center;
      margin-top: 10rpx;
      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
        border-radius: 50rpx;
      }
    }
  }
}
.main {
  margin-top: -90rpx;
}
.kthyBox {
  display: flex;
  align-items: center;
  background: #14041c;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 20rpx;
  image {
    width: 48rpx;
    height: 48rpx;
    background: #362e2d;
    margin-right: 16rpx;
    border-radius: 50%;
  }
  .text {
    font-size: 30rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #d7cb94;
    line-height: 42rpx;
  }
  .btn {
    background: linear-gradient(90deg, #fddf9e 0%, #ffd274 100%);
    border-radius: 28rpx;
    padding: 8rpx 28rpx;
    font-size: 26rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #14041c;
    line-height: 36rpx;
    margin-left: 44rpx;
  }
}
.walletList {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding-top: 20rpx;
  border-top: 1px solid #f5f5f5;
  margin: 0 auto;
  margin-top: 20rpx;

  .num {
    font-size: 38rpx;
    font-weight: 500;
    color: #333333;
    line-height: 62rpx;
  }
  .name {
    font-size: 26rpx;
    color: #333333;
    line-height: 34rpx;
  }
}
/deep/ .u-cell__body {
  width: 100%;
  padding: 25rpx 0px !important;
}
.toolIcon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx !important;
}
.sqBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 64rpx;
  .item {
    display: flex;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 6rpx;
    }
  }
}
.box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32rpx;
  .left {
    display: flex;

    .nameBox {
      .name {
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #1e1e1e;
        line-height: 44rpx;
        image {
          width: 28rpx;
          height: 28rpx;
          margin-left: 10rpx;
        }
      }
      .zw {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #bebebe;
        line-height: 46rpx;
        margin-top: 8rpx;
      }
      .gs {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #bebebe;
        line-height: 46rpx;
      }
    }
  }
  .headImage {
    width: 88rpx;
    height: 88rpx;
    background: salmon;
    margin-right: 24rpx;
    border-radius: 50%;
  }
}
.ewmImg {
  text-align: center;
  margin-bottom: 20rpx;
}
.lxkf {
  /deep/.u-reset-button {
    border: none !important;
    position: absolute !important;
    left: 0;
    top: 144px;
    background: rgba(0, 0, 0, 0) !important;
  }
}
</style>
